<template>
  <div>
    <div class="fixHead">
      <div class="title">
        <span class="iconfont icon-jiantou" @click="$router.go(-1)"></span>
        <span class="icon-home" @click="$router.push('/')"></span>
        <h1>会员中心</h1>
      </div>
      <div style="height: 0.88rem;"></div>
    </div>
    <div class="vip">
      <div class="imgTitle"></div>
      <div class="list">
        <div class="item">
          <div class="name"><span>创建社群</span></div>
          <div class="txt"><span>专业内容快速分发，聚力推广获客</span></div>
        </div>
        <div class="item">
          <div class="name"><span>加入社群</span></div>
          <div class="txt">
            <span>拓展更多合作渠道，发现更多机会，人生不设限</span>
          </div>
        </div>
        <div class="item">
          <div class="name"><span>专业推文素材转换</span></div>
          <div class="txt"><span>一键转换为自己的推文，专业获客</span></div>
        </div>
        <div class="item">
          <div class="name"><span>推广获客</span></div>
          <div class="txt"><span>专业推手助力，项目快速推广获客</span></div>
        </div>
      </div>
      <div class="btn" @click="show1 = true">
        <span class="time">￥198/年 立即开通 <span>限时</span></span>
      </div>
    </div>

    <!-- 支付方式 -->
    <yd-popup v-model="show1" position="bottom" width="100%">
      <ul class="table-view">
        <li class="title">支付</li>
        <li class="item border">
          <div class="left">
            <div class="icon">
              <img src="../../assets/images/mkf/pay_wechat.png" />
            </div>
            <span class="name">微信支付</span>
          </div>
          <div class="right">
            <span class="iconfont icon-jiantou"></span>
          </div>
        </li>
        <li class="item border">
          <div class="left">
            <div class="icon">
              <img src="../../assets/images/mkf/pay_ali.png" />
            </div>
            <span class="name">支付宝支付</span>
          </div>
          <div class="right">
            <span class="iconfont icon-jiantou"></span>
          </div>
        </li>
        <li
          class="item"
          @click="
            show1 = false;
            show2 = true;
          "
        >
          <div class="left">
            <div class="icon">
              <img src="../../assets/images/mkf/pay_score.png" />
            </div>
            <span class="name">积分兑付</span>
            <span class="small"
              >1积分&nbsp;<img
                src="../../assets/images/mkf/exchange.png"
              />&nbsp;￥1.00</span
            >
          </div>
          <div class="right">
            <span class="name">可用积分:1000</span>
            <span class="iconfont icon-jiantou"></span>
          </div>
        </li>
        <li class="cut"></li>
        <li
          class="item"
          @click="
            show1 = false;
            show3 = true;
          "
        >
          <div class="left">
            <div class="icon">
              <img
                src="../../assets/images/mkf/pay_code.png"
                style="width: 0.56rem;height: 0.48rem;"
              />
            </div>
            <span class="name">使用VIP激活码</span>
          </div>
          <div class="right">
            <span class="iconfont icon-jiantou"></span>
          </div>
        </li>
      </ul>
    </yd-popup>
    <!-- 验证码 -->
    <yd-popup v-model="show2" position="center" width="100%">
      <div class="wDialog">
        <div class="wdTitle">
          <span>请输入短信验证码</span>
          <button class="closeWDialog" @click="show2 = false"></button>
        </div>
        <p class="wdTip">验证码已发送至155****1234</p>
        <div class="wdInput">
          <!-- class="red"  -->
          <input type="text" placeholder="请输入验证码" />
          <button type="button">重发</button>
        </div>
        <button class="wdBtn" @click="show2 = false">确定</button>
      </div>
    </yd-popup>
    <!-- 激活码 -->
    <yd-popup v-model="show3" position="center" width="100%">
      <div class="wDialog">
        <div class="wdTitle">
          <span>请输入VIP激活码</span>
          <button class="closeWDialog" @click="show3 = false"></button>
        </div>
        <div class="wdInput">
          <!-- class="red"  -->
          <input type="text" placeholder="请输入VIP激活码" />
        </div>
        <button class="wdBtn" @click="show3 = false">确认提交</button>
      </div>
    </yd-popup>
  </div>
</template>

<script>
import { Popup } from "vue-ydui/dist/lib.rem/popup";
export default {
  name: "",
  components: {
    ydPopup: Popup
  },
  props: {},
  data: function() {
    return {
      show1: false,
      show2: false,
      show3: false
    };
  },
  mounted: function() {},
  methods: {}
};
</script>

<style scoped>
.table-view .title {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 1rem;
  text-align: center;
  font-size: 0.32rem;
  color: rgba(255, 255, 255, 0.5);
}
.table-view .item {
  width: 6.9rem;
  margin: 0 auto;
  font-size: 0.32rem;
  line-height: 0.6rem;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 0px;
  padding: 0.3rem 0;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.table-view .item.border {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.table-view .item .left,
.table-view .item .right {
  display: flex;
  align-items: center;
}
.table-view .item .left .icon {
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-view .item .left .icon img {
  width: 0.6rem;
  height: 0.6rem;
}
.table-view .item .left .small {
  padding-left: 0.2rem;
  font-size: 0.24rem;
  color: #deaa8a;
  display: flex;
  align-items: center;
}
.table-view .item .left .small img {
  width: 0.28rem;
}
.table-view .item .right .name {
  font-size: 0.24rem;
  color: #ffffff;
  padding-right: 0.08rem;
}
.table-view .item .right .iconfont {
  font-size: 0.32rem;
  color: #666;
}

.fixHead .title {
  background-color: #2a2631;
}
.vip .imgTitle {
  width: 100%;
  height: 2.61rem;
  background: #32303a url(../../assets/images/mkf/vipTitle.png) top left
    no-repeat;
  background-size: 100% auto;
}
.vip .list {
  padding-bottom: 1.5rem;
}
.vip .list .item {
  padding-top: 0.4rem;
  padding-bottom: 0.56rem;
}
.vip .list .item .name {
  height: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vip .list .item .name span {
  font-size: 0.4rem;
  font-weight: bold;
  letter-spacing: 4px;
  color: #deaa8a;
  position: relative;
  line-height: 0.78rem;
}
.vip .list .item .name span::before,
.vip .list .item .name span::after {
  content: "";
  width: 1.3rem;
  height: 2px;
  background: url(../../assets/images/mkf/vipLine.png) center no-repeat;
  background-size: 1.3rem auto;
  position: absolute;
  top: 50%;
  margin-top: -1px;
}
.vip .list .item .name span::before {
  left: -1.6rem;
}
.vip .list .item .name span::after {
  right: -1.6rem;
}
.vip .list .item .txt {
  width: 6.2rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.vip .list .item .txt span {
  padding: 0 0.24rem;
  background-color: #2a2631;
  border-radius: 0.2rem;
  line-height: 0.4rem;
  font-size: 0.24rem;
  letter-spacing: 1px;
  color: #deaa8a;
}
.vip .btn {
  width: 5.4rem;
  height: 0.88rem;
  text-align: center;
  box-shadow: 0px 0.02rem 0.2rem 0px rgba(0, 0, 0, 0.2);
  background-image: linear-gradient(90deg, #faeadd 0%, #e7b394 100%);
  border-radius: 0.44rem;
  z-index: 10;
  background-image: -webkit-linear-gradient(0deg, #faeadd 0%, #e7b394 100%);
  position: fixed;
  bottom: 0.58rem;
  left: 50%;
  margin-left: -2.7rem;
  font-size: 0.36rem;
  font-weight: bold;
  color: #32303a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vip .btn .time {
  position: relative;
  line-height: 0.88rem;
  display: block;
  height: 0.88rem;
}
.vip .btn .time span {
  position: absolute;
  top: 0.3rem;
  right: -0.78rem;
  display: block;
  width: 0.68rem;
  height: 0.28rem;
  line-height: 0.28rem;
  text-align: center;
  border-radius: 0.14rem 0.14rem 0.14rem 0;
  background-color: #2a2631;
  font-size: 0.22rem;
  font-weight: normal;
  color: #deaa8a;
}
</style>
